<template>
    <div style="font-size: 30px; font-weight: bold; margin:20px 0;">所有公告</div>
    <el-table
        :data="noticeList"
        border
        style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="50">
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="200">
        </el-table-column>
        <el-table-column
            prop="detail"
            label="内容"
            width="700">
        </el-table-column>
         <el-table-column
            prop="date"
            label="日期" >
        </el-table-column>
    </el-table>
    <el-pagination
    class="page"
    :pager-count="11"
    layout="prev, pager, next"
    :total="pageData.total"
  />
    <!-- 
    <ul>
      <li v-for="notice in noticeList" :key="notice"> 
          {{ notice.date }}
      </li>
    </ul> 
    -->
</template>

<script setup>
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import NoticeService from "../stores/NoticeService"
import axios from "axios";

    //初始化数据
    const noticeList = ref([]);
    const pageData = reactive({
        total : 0,
    })
    //从服务器获取所有公告
    const fetchNotice = async ()=>{
        const [err, res] = await NoticeService.promise_process(NoticeService.getNotices());
        if(err){
            console.log(err)
            alert("请求服务器失败")
        }
        if(res)
            console.log(res)
            noticeList.value = res.data
            pageData.total = res.data.length
    
    }

    //钩子函数
    onMounted(fetchNotice)

</script>

<style scoped>
.page{
    position: absolute;
    left: 50%;
    
}
</style>